<template>
  <van-cell-group id="Quest">
    <van-cell
      disabled
      title="视频"
      style="width: 25%; float: left;"
    />
    <van-picker
      :columns="video_name"
      @change="onChange"
      style="width: 75%; float: right;"
    />
    <van-cell
      v-for="(item, index) in question"
      :key="index"
      :title="item.title"
    >
      <van-icon slot="right-icon" name="close" class="van-cell__right-icon" @click="deleteQuest(item.id, index)"/>
    </van-cell>
    <div style="clear: both; height: 0;"></div>
  </van-cell-group>
</template>

<script>
  import {Field, Cell, CellGroup, Stepper, Button, Icon, Picker, Toast, Dialog} from 'vant';


  export default {
    name: "Questions",
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Stepper.name]: Stepper,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Picker.name]: Picker,
      [Toast.name]: Toast,
      [Dialog.name]: Dialog,
    },
    data() {
      return {
        video_id: [],
        video_name: [],
        list: [],
        video: 0,
        question: []
      }
    },
    props: ["questStatus", "videoStatus"],
    methods: {
      getExam() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("exam"), {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          // console.log(res.data.data);
          let video_list = res.data.data;
          _this.video_id = [];
          _this.video_name = [];
          for (let i = 0; i < video_list.length; i++) {
            _this.video_id.push(video_list[i].id);
            _this.video_name.push(video_list[i].name);
          }
          _this.getData();
        });
      },
      getData() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("exam/index/videoExam"), {
          params: {'id': _this.video_id[_this.video]}, headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          console.log(res.data);
          // console.log(_this.video_id[_this.video]);
          let code = res.data.statusCode;
          if (code === 200) {
            _this.question = res.data.data.question;
          }
        });
      },
      onChange(picker, value, index) {
        let _this = this;
        _this.video = index;
      },
      deleteQuest(id, index) {
        let _this = this;
        Dialog.confirm({
          title: '您确定要删除吗？',
        }).then(() => {
          let token = _this.getCookie("token");
          let data = _this.$qs.stringify({
            'id': id
          });
          _this.$http.delete(_this.apiUrl('user/exam/delVideoExam'), {
            data: data,
            headers: {
              'token': token,
              'sid': _this.$route.query.sid
            }
          }).then((res) => {
            // console.log(res.data);
            _this.question.splice(index, 1);
          });
        }).catch(() => {
        });
      }
    },
    mounted() {
      let _this = this;
      _this.getExam();
    },
    watch: {
      "video": function () {
        let _this = this;
        _this.getData();
      },
      "videoStatus":function () {
        let _this = this;
        _this.getExam();
      },
      "questStatus": function () {
        let _this = this;
        _this.getExam();
      }
    }
  }
</script>

<style>
  #Quest .van-cell__title, #Quest .van-cell__value {
    flex: none;
  }

  #Quest .van-cell__title {
    width: 95%;
  }

  #Quest .van-cell__value {
    width: 0;
  }
</style>
<style scoped>

</style>
